<script>
/**
 * @Author: 焦质晔
 * @Date: 2019-06-20 10:00:00
 * @Last Modified by:   焦质晔
 * @Last Modified time: 2019-06-20 10:00:00
 **/
import moment from 'moment';
import { getLodop } from './LodopFuncs';
import { getAppId } from '@/assets/js/auth';
import css from './assets/style.module.js';

export default {
  name: 'BasePrint',
  props: {
    template: {
      type: String,
      required: true,
      default: ''
    },
    direction: {
      type: String,
      default: 'vertical'
    },
    printCopies: {
      type: Number,
      default: 1
    },
    alwaysPrint: {
      type: Boolean,
      default: false
    },
    isPreview: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      required: true,
      default() {
        return {};
      }
    },
    showTopIcon: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    showPrintTime: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      LODOP: getLodop(),
      state: 'stop'
    };
  },
  created() {
    // 动态加载组件
    this.$options.component = () => import(`@/pages/printTemplate/${this.template}.vue`);
  },
  beforeDestroy() {
    // 释放内存
    this.LODOP = null;
  },
  methods: {
    getPrintTable(_html_) {
      // 添加打印单头部 logo
      _html_ = this.createPrintLogo(_html_);
      // 处理分页符
      _html_ = this.createPageBreak(_html_);
      // 加载全局 style 样式
      _html_ = this.createGlobalStyle(_html_);
      if (this.isPreview == true) {
        this.createPreviewNodes(_html_);
      } else {
        // 执行打印
        this.createPrintPage(_html_);
      }
    },
    createPrintPage(printHTML) {
      if (!this.LODOP) {
        this.LODOP = getLodop();
      }
      if (!this.LODOP) return;
      this.LODOP.PRINT_INIT('打印表格');
      this.LODOP.SET_PRINT_MODE('WINDOW_DEFPAGESIZE', 'A4'); // 设置打印为默认A4 不指定纸张大小

      // 纵向
      if (this.direction === 'vertical') {
        // 按内容走纸，连续打印
        if (this.alwaysPrint) {
          // this.LODOP.SET_PRINT_PAGESIZE(3, '210mm', '10mm', ''); // 10mm -> 打印的下边距
          this.LODOP.SET_PRINT_PAGESIZE(3, '', '10mm', ''); // 10mm -> 打印的下边距 设置打印为默认A4 不指定纸张大小
        } else {
          // 整张打印
          // this.LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '');
          this.LODOP.SET_PRINT_PAGESIZE(1); // 设置打印为默认A4 不指定纸张大小
        }
      }
      // 横向
      if (this.direction === 'horizontal') {
        // this.LODOP.SET_PRINT_PAGESIZE(2, '210mm', '297mm', '');
        this.LODOP.SET_PRINT_PAGESIZE(2); // 设置打印为默认A4 不指定纸张大小
        this.LODOP.SET_SHOW_MODE('LANDSCAPE_DEFROTATED', 1);
      }
      this.LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'width: 100%'); // 设置打印内容的自动缩放
      this.LODOP.SET_PRINT_MODE('AUTO_CLOSE_PREWINDOW', 1); // 设置设置完打印后 是否关闭预览窗口;
      this.LODOP.SET_PRINT_COPIES(this.printCopies); // 指定打印份数
      this.LODOP.SET_PRINT_STYLEA(0, 'HtmWaitMilSecs', 1000);
      this.LODOP.ADD_PRINT_HTM(0, 0, 'RightMargin: 0', 'BottomMargin: 0', printHTML);
      this.LODOP.PREVIEW();
    },
    createGlobalStyle(_html_) {
      return css.style + _html_;
    },
    createPreviewNodes(_html_) {
      const $target = document.body.querySelector('.preview-wrap');
      if (!$target) {
        let $wrapper = document.createElement('div');
        $wrapper.className = 'preview-wrap';
        $wrapper.innerHTML = _html_;
        document.body.appendChild($wrapper);
        $wrapper = null;
      } else {
        $target.innerHTML = _html_;
      }
    },
    createPrintLogo(_html_) {
      const logoHtml = this.showTopIcon
        ? `
        <table>
          <tr>
            <td width="30%" align="left" style="padding-top: 20px; padding-bottom: 20px;">
              ${
                getAppId() == 'beijing'
                  ? `<img src="" width="200" style="margin-left: 20px;" />`
                  : `<img src="" width="150" style="margin-left: 20px;" />`
              }
            </td>
            <td width="70%" align="center" style="font-size: 30px">
              ${this.title}
            </td>
          </tr>
        </table>
      `
        : '';
      let printTimeHtml = this.showPrintTime ? `<table><tr><td align="right">打印时间：${moment().format('YYYY-MM-DD HH:mm:ss')}</td></tr></table>` : '';
      return printTimeHtml + logoHtml + _html_;
    },
    createPageBreak(_html_) {
      // 正则处理分页符，vue 的 template 把 page-break-after 改成了 break-after，
      // 因此需要替换回来
      const RegExp = /break-after:\s*page/g;
      const pageBreakMark = `page-break-after: always`;
      return _html_.replace(RegExp, pageBreakMark);
    },
    createPrintComponent(h) {
      return h(this.$options.component, {
        props: {
          data: this.data,
          isPreview: this.isPreview
        },
        on: {
          onPrintTable: this.getPrintTable
        }
      });
    },
    EXCUTE_PRINT() {
      this.state = 'start';
      setTimeout(() => (this.state = 'stop'), 500);
    }
  },
  render(h) {
    const vNode = this.state === 'start' ? this.createPrintComponent(h) : null;
    return <div class="print-wrap">{vNode}</div>;
  }
};
</script>

<style lang="less" scoped>
.print-wrap {
  visibility: hidden;
}
</style>
